"use client"

import type React from "react"

import { Button } from "@/components/ui/button"
import { apiCall, mockGenerators } from "@/lib/mock-api"
import {
  Cloud,
  Lock,
  Share2,
  Zap,
  CheckCircle,
  Users,
  Shield,
  Smartphone,
  Globe,
  FileText,
  ImageIcon,
  Video,
} from "lucide-react"
import Link from "next/link"
import { useEffect, useState } from "react"

export default function HomePage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false)

  useEffect(() => {
    let isMounted = true

    const checkLoginStatus = async () => {
      const token = localStorage.getItem("driveJWTToken")

      if (!token) {
        if (isMounted) {
          setIsLoggedIn(false)
        }
        return
      }

      try {
        await apiCall("/api/auth/info", { method: "GET" }, undefined, mockGenerators.currentUser)
        if (isMounted) {
          setIsLoggedIn(true)
        }
      } catch (error) {
        console.error("获取登录信息失败", error)
        if (isMounted) {
          setIsLoggedIn(false)
        }
      }
    }

    checkLoginStatus()

    return () => {
      isMounted = false
    }
  }, [])

  return (
    <div className="relative min-h-screen overflow-hidden bg-gradient-to-b from-background via-background to-primary/5">
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,hsl(var(--primary)/0.03)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--primary)/0.03)_1px,transparent_1px)] bg-[size:4rem_4rem]" />
      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-primary/10" />

      {/* Header */}
      <header className="relative border-b bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
        <div className="container mx-auto flex h-16 items-center justify-between px-4">
          <div className="flex items-center gap-2">
            <div className="relative">
              <Cloud className="h-8 w-8 text-primary" />
              <div className="absolute inset-0 animate-pulse blur-xl opacity-50">
                <Cloud className="h-8 w-8 text-primary" />
              </div>
            </div>
            <span className="text-xl font-bold">云存</span>
          </div>

          <div className="ml-auto flex items-center gap-3">
            {isLoggedIn ? (
              <Button asChild className="shadow-lg shadow-primary/20">
                <Link href="/drive">进入网盘</Link>
              </Button>
            ) : (
              <>
                <Button variant="ghost" asChild>
                  <Link href="/login">登录</Link>
                </Button>
                <Button asChild className="shadow-lg shadow-primary/20">
                  <Link href="/register">注册</Link>
                </Button>
              </>
            )}
          </div>
        </div>
      </header>

      {/* Hero Section */}
      <section className="relative overflow-hidden px-4 py-24 sm:py-32">
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-x-0 top-12 bottom-10 z-0 w-full rounded-[48px] bg-gradient-to-r from-sky-200/70 via-blue-200/60 to-cyan-200/70 blur-3xl opacity-90 sm:top-16 sm:bottom-12"
        />
        <div className="relative z-10 mx-auto max-w-4xl space-y-8 text-center">
          <div className="inline-flex items-center gap-2 rounded-full border bg-muted/50 px-4 py-1.5 text-sm backdrop-blur-sm">
            <Zap className="h-3.5 w-3.5 text-primary" />
            <span>新一代云存储平台</span>
          </div>

          <h1 className="text-balance text-5xl font-bold tracking-tight sm:text-6xl">
            安全、快速的
            <span className="text-primary"> 云存储服务</span>
          </h1>

          <p className="mx-auto max-w-2xl text-pretty text-lg text-muted-foreground sm:text-xl">
            随时随地访问您的文件，与团队协作，让数据更安全
          </p>

          <div className="flex flex-wrap items-center justify-center gap-4 pt-4">
            {isLoggedIn ? (
              <Button size="lg" className="shadow-xl shadow-primary/25" asChild>
                <Link href="/drive">
                  立即使用
                  <Zap className="ml-2 h-4 w-4" />
                </Link>
              </Button>
            ) : (
              <>
                <Button size="lg" className="shadow-xl shadow-primary/25" asChild>
                  <Link href="/register">
                    免费开始
                    <Zap className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
                <Button size="lg" variant="outline" asChild>
                  <Link href="/login">登录账户</Link>
                </Button>
              </>
            )}
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section className="relative container mx-auto px-4 py-20">
        <div className="mb-16 text-center">
          <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">强大的功能特性</h2>
          <p className="mx-auto mt-4 max-w-2xl text-pretty text-lg text-muted-foreground">
            为个人和团队打造的全方位云存储解决方案
          </p>
        </div>

        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
          <FeatureCard
            icon={<Cloud className="h-10 w-10 text-primary" />}
            title="海量存储空间"
            description="提供充足的云端存储空间，支持TB级文件存储，满足您的各种文件存储需求"
          />
          <FeatureCard
            icon={<Share2 className="h-10 w-10 text-primary" />}
            title="智能分享"
            description="一键生成分享链接，支持密码保护和有效期设置，安全便捷地分享文件"
          />
          <FeatureCard
            icon={<Zap className="h-10 w-10 text-primary" />}
            title="极速传输"
            description="采用CDN加速和断点续传技术，上传下载速度提升10倍，大文件传输更快"
          />
          <FeatureCard
            icon={<Shield className="h-10 w-10 text-primary" />}
            title="数据备份"
            description="多地域冗余存储，自动备份机制，99.99%的数据持久性保障"
          />
          <FeatureCard
            icon={<FileText className="h-10 w-10 text-primary" />}
            title="在线预览"
            description="支持图片、文档、视频等100+种文件格式在线预览，无需下载即可查看"
          />
          <FeatureCard
            icon={<Globe className="h-10 w-10 text-primary" />}
            title="全球加速"
            description="覆盖全球的CDN节点，无论您在哪里都能享受极速的访问体验"
          />
        </div>
      </section>

      <section className="relative container mx-auto px-4 py-20">
        <div className="rounded-2xl border bg-gradient-to-br from-primary/5 via-background to-primary/10 p-8 sm:p-12">
          <div className="mb-12 text-center">
            <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-4xl">支持所有文件类型</h2>
            <p className="mx-auto mt-4 max-w-2xl text-pretty text-lg text-muted-foreground">
              无论是文档、图片、视频还是其他任何格式，云存都能完美支持
            </p>
          </div>

          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            <FileTypeCard icon={<FileText />} title="文档" formats="PDF, DOC, XLS, PPT, TXT" />
            <FileTypeCard icon={<ImageIcon />} title="图片" formats="JPG, PNG, GIF, SVG, WebP" />
            <FileTypeCard icon={<Video />} title="视频" formats="MP4, AVI, MOV, MKV, WebM" />
            <FileTypeCard icon={<Cloud />} title="压缩包" formats="ZIP, RAR, 7Z, TAR, GZ" />
            <FileTypeCard icon={<CheckCircle />} title="代码" formats="JS, PY, JAVA, HTML, CSS" />
            <FileTypeCard icon={<Globe />} title="更多" formats="音频、3D模型、CAD..." />
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="relative container mx-auto px-4 py-20">
        <div className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-primary to-primary/80 px-6 py-20 text-center shadow-2xl">
          <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,white/0.05_1px,transparent_1px),linear-gradient(to_bottom,white/0.05_1px,transparent_1px)] bg-[size:2rem_2rem]" />
          <div className="relative">
            <h2 className="text-balance text-3xl font-bold text-white sm:text-4xl lg:text-5xl">准备好开始使用了吗？</h2>
            <p className="mx-auto mt-6 max-w-2xl text-pretty text-lg text-white/90">
              {isLoggedIn
                ? "您的文件正在等待您，立即进入网盘开始管理"
                : "立即注册获得免费存储空间，无需信用卡，简单三步即可开始使用"}
            </p>
            <div className="mt-8 flex flex-wrap items-center justify-center gap-4">
              {isLoggedIn ? (
                <Button size="lg" variant="secondary" className="shadow-xl" asChild>
                  <Link href="/drive">进入网盘</Link>
                </Button>
              ) : (
                <>
                  <Button size="lg" variant="secondary" className="shadow-xl" asChild>
                    <Link href="/register">立即注册</Link>
                  </Button>
                  <Button
                    size="lg"
                    variant="outline"
                    className="border-white/20 bg-white/10 text-white hover:bg-white/20"
                    asChild
                  >
                    <Link href="/login">已有账户</Link>
                  </Button>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative bg-muted/30 py-12">
        <div className="container mx-auto px-4">
          <div className="mt-12 border-t pt-8 text-center text-sm text-muted-foreground">
            <p>© 2025 云存. 保留所有权利。</p>
          </div>
        </div>
      </footer>
    </div>
  )
}

function StatCard({ number, label }: { number: string; label: string }) {
  return (
    <div className="text-center">
      <div className="text-2xl font-bold text-primary sm:text-3xl">{number}</div>
      <div className="mt-1 text-sm text-muted-foreground">{label}</div>
    </div>
  )
}

function FeatureCard({
  icon,
  title,
  description,
}: {
  icon: React.ReactNode
  title: string
  description: string
}) {
  return (
    <div className="group rounded-xl border bg-card/50 p-6 backdrop-blur-sm transition-all hover:border-primary/50 hover:shadow-xl hover:shadow-primary/5">
      <div className="mb-4 transition-transform group-hover:scale-110">{icon}</div>
      <h3 className="mb-2 text-xl font-semibold">{title}</h3>
      <p className="text-pretty text-sm text-muted-foreground">{description}</p>
    </div>
  )
}

function FileTypeCard({ icon, title, formats }: { icon: React.ReactNode; title: string; formats: string }) {
  return (
    <div className="rounded-lg border bg-card/80 p-4 backdrop-blur-sm">
      <div className="mb-3 flex items-center gap-3">
        <div className="text-primary">{icon}</div>
        <h3 className="font-semibold">{title}</h3>
      </div>
      <p className="text-sm text-muted-foreground">{formats}</p>
    </div>
  )
}

function SecurityFeature({ title, description }: { title: string; description: string }) {
  return (
    <div className="flex gap-3">
      <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-primary/10">
        <CheckCircle className="h-4 w-4 text-primary" />
      </div>
      <div>
        <div className="font-semibold">{title}</div>
        <div className="text-sm text-muted-foreground">{description}</div>
      </div>
    </div>
  )
}
